<template>
    <div>
        <a class="btn btn-outline-success" href="/add">新增</a>
        房号名称：<input type="text" v-model="p.name">
        房型名称： <select  v-model="p.hid">
                            <option value="0">请选择</option>
                            <option v-for="i in d" :value="i.id">{{ i.hname }}</option>
                        </select>
                        <input type="button" value="查询" @click="chsfg" class="btn btn-outline-success">
        <input type="button" value="根据价格升序" @click="defi(true)">
        <input type="button" value="根据价格降序" @click="defi(false)">
        <table class="table">
        <thead>
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>price</td>
                    <td>isDeposit</td>
                    <td>deposit</td>
                    <td>area</td>
                    <td>count</td>
                    <td>isNode</td>
                    <td>node</td>
                    <td>extraBed</td>
                    <td>extraBedPrice</td>
                    <td>img</td>
                    <td>state</td>
                    <td>houseTypeId</td>
                    <td>isDelete</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="i in data">
                    <td>{{i.id}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.price}}</td>
                    <td>{{i.isDeposit}}</td>
                    <td>{{i.deposit}}</td>
                    <td>{{i.area}}</td>
                    <td>{{i.count}}</td>
                    <td>{{i.isNode}}</td>
                    <td>{{i.node}}</td>
                    <td>{{i.extraBed}}</td>
                    <td>{{i.extraBedPrice}}</td>
                    <td> <img style="width: 150px;width: 150px;" :src="'https://localhost:7097'+i.img" alt=""></td>
                    <td>{{i.state}}</td>
                    <td>{{i.houseTypeId}}</td>
                    <td>{{i.isDelete}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="deler(i.id)" class="btn btn-outline-warning">
                        <input type="button" value="编辑" @click="uppp(i.id)" class="btn btn-outline-info">
                        <a :href="'https://localhost:7097'+i.img" target="_blank">看图片</a>
                    </td>
                </tr>
            </tbody>
        </table>
        一共{{ p.PCount }}页，一共{{ p.Count }}条，每页{{ p.size }}条，当前第{{ p.index }}页

<a href="#" class="btn btn-outline-success" @click="Page(1)">首页</a>
<a href="#" class="btn btn-outline-warning " @click="Page(2)">上一页</a>
<a href="#" class="btn btn-outline-danger" @click="Page(3)">下一页</a>
<a href="#" class="btn btn-outline-info" @click="Page(4)">尾页</a>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();


onMounted(() => {
    gette();
    show();
})

const uppp=(id:any)=>{

router.push({path:'/eidter',query:{id:id}})

}
const defi=(val:any)=>{

p.value.sort=val;
show();

}

const Page=(v:any)=>{


if(v==1)
{
    p.value.index=1;
    show();
}
if(v==2)
{
    if(p.value.index>1)
{
    p.value.index-=1;
    show();
}
}
if(v==3)
{
    if(p.value.index<p.value.PCount)
{
    p.value.index+=1;
    show();
}
}
   
if(v==4)
{
    p.value.index=p.value.PCount;
    show();
}

}
const chsfg=()=>{

    p.value.index=1;
    show();
}

const deler=(id:any)=>{
    if(!confirm("确认删除吗？"))
{
    return;
}
axios.delete("https://localhost:7097/api/HouseNum/LogicDelete?id="+id).then(res=>{
    if(res.data>0)
{
    alert("逻辑删除成功");
  show();
}
else
{
    alert("逻辑删除失败");
    return;
}



})

}



const d:any=ref({
      "id": 0,
  "hname": ""
})
const gette=()=>{

axios.get("https://localhost:7097/api/HouseType/GetType").then(res=>{

d.value=res.data;

})


}
const data:any=ref([])

const p:any=ref({
index:1,
size:3,
name:'',
hid:0,
sort:true,
PCount:0,
Count:0,

})
const show=()=>{

axios.get("https://localhost:7097/api/HouseNum/GetNum",{params:p.value}).then(res=>{



data.value=res.data.data;
p.value.Count=res.data.count;
p.value.PCount=Math.ceil(p.value.Count/p.value.size);




})

}

</script>

<style scoped>

</style>